<template>
  <div class="rank" :style="{ backgroundImage: 'url(' + bc_svg + ')' }">
    <div class="top">
      <van-tabs
        class="tab"
        v-model="active"
        :title-inactive-color="'rgb(254, 224, 110)'"
        :title-active-color="'rgb(244, 54, 76)'"
        :color="'rgb(244, 54, 76)'"
      >
        <van-tab title="Lucky Ones"> </van-tab>
        <van-tab title="Consumer"> </van-tab>
      </van-tabs>
      <transition
        name="slide"
        enter-active-class="slideInLeft"
        leave-active-class="slideOutLeft"
      >
        <div
          class="content"
          v-if="active == 0"
          style="animation-duration: 0.5s"
        >
          <div class="page-top-bc">
            <div class="page-top-bc">
              <div
                style="
                  background-image: url('/static/img/main/top_bc.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  height: 794px;
                "
              >
                <div
                  class="page-top-img-bc"
                  style="
                    background-image: url('/static/img/main/rank_top_img.webp');
                    background-size: 100% auto;
                  "
                >
                  <div class="cont"><div class="light"></div></div>
                </div>
                <img
                  class="page-top-img-bu"
                  :src="'/static/img/main/b_w.webp'"
                />
                <img
                  @click="gotoDetail"
                  class="page-top-img-banner"
                  :src="'/static/img/main/rank_banner.webp'"
                />
              </div>
            </div>
          </div>
          <div class="rank-top" v-if="luckyData.length">
            <div class="rank-top-item">
              <div class="rank-top-content content-1">
                <div class="head-content">
                  <!----><img
                    class="head-content-guan"
                    src="/static/img/main/guan_2.webp"
                    draggable="false"
                  />

                  <!----><img
                    class="head-content-img"
                    src="/static/img/main/32.webp"
                    draggable="false"
                  />
                </div>
                <div class="user-name u-line-1">luckyman</div>
                <div class="rank-price">$65,000.00</div>
                <div class="bu-img-content">
                  <!----><img
                    class="bu-img"
                    src="/static/img/main/bu_2.webp"
                    draggable="false"
                  />
                  <div class="bu-img-text">NO.2</div>
                </div>
              </div>
            </div>
            <div class="rank-top-item">
              <div class="rank-top-content content-2">
                <div class="head-content">
                  <!----><img
                    class="head-content-guan"
                    src="/static/img/main/guan_1.webp"
                    draggable="false"
                  />

                  <!----><img
                    class="head-content-img"
                    src="/static/img/main/32.webp"
                    draggable="false"
                  />
                </div>
                <div class="user-name u-line-1">luckyman</div>
                <div class="rank-price">$65,000.00</div>
                <div class="bu-img-content">
                  <!----><img
                    class="bu-img"
                    src="/static/img/main/bu_1.webp"
                    draggable="false"
                  />
                  <div class="bu-img-text">NO.1</div>
                </div>
              </div>
            </div>
            <div class="rank-top-item">
              <div class="rank-top-content content-3">
                <div class="head-content">
                  <!----><img
                    class="head-content-guan"
                    src="/static/img/main/guan_3.webp"
                    draggable="false"
                  />

                  <!----><img
                    class="head-content-img"
                    src="/static/img/main/32.webp"
                    draggable="false"
                  />
                </div>
                <div class="user-name u-line-1">luckyman</div>
                <div class="rank-price">$65,000.00</div>
                <div class="bu-img-content">
                  <!----><img
                    class="bu-img"
                    src="/static/img/main/bu_3.webp"
                    draggable="false"
                  />
                  <div class="bu-img-text">NO.3</div>
                </div>
              </div>
            </div>
          </div>
          <div class="table" v-if="luckyData.length">
            <div class="table-content">
              <div class="table-row table-head">
                <div class="num-item">No.</div>
                <div class="name-item">User</div>
                <div class="price-item">Money</div>
              </div>
              <div class="table-row" v-for="(item, index) in 100" :key="index">
                <div class="num-item">4</div>
                <div class="name-item">
                  <img
                    class="name-item-avatar"
                    src="/static/img/main/32.webp"
                    draggable="false"
                  />
                  <div class="name-item-text u-line-1">codere</div>
                </div>
                <div class="price-item">$1,010.95</div>
              </div>
            </div>
          </div>
          <span v-if="!luckyData.length" class="icon iconfont back"
            >&#xe642;</span
          >
          <div v-if="!luckyData.length" class="no-data">No data</div>
        </div>
      </transition>

      <transition
        name="slide"
        enter-active-class="slideInRight"
        leave-active-class="slideOutRight"
      >
        <div class="content" v-if="active == 1" style="animation-duration: 1s">
          <div class="page-top-bc">
            <div class="page-top-bc">
              <div
                style="
                  background-image: url('/static/img/main/top_bc.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  height: 794px;
                "
              >
                <div
                  class="page-top-img-bc"
                  style="
                    background-image: url('/static/img/main/rank_top_img.webp');
                    background-size: 100% auto;
                  "
                >
                  <div class="cont"><div class="light"></div></div>
                </div>
                <img
                  class="page-top-img-bu"
                  :src="'/static/img/main/c_l.webp'"
                />
                <img
                  @click="gotoDetail"
                  class="page-top-img-banner"
                  :src="'/static/img/main/rank_banner.webp'"
                />
              </div>
            </div>
            <div class="rank-top">
              <div class="rank-top-item">
                <div class="rank-top-content content-1">
                  <div class="head-content">
                    <!----><img
                      class="head-content-guan"
                      src="/static/img/main/guan_2.webp"
                      draggable="false"
                    />

                    <!----><img
                      class="head-content-img"
                      src="/static/img/main/32.webp"
                      draggable="false"
                    />
                  </div>
                  <div class="user-name u-line-1">luckyman</div>
                  <div class="rank-price">$65,000.00</div>
                  <div class="bu-img-content">
                    <!----><img
                      class="bu-img"
                      src="/static/img/main/bu_2.webp"
                      draggable="false"
                    />
                    <div class="bu-img-text">NO.2</div>
                  </div>
                </div>
              </div>
              <div class="rank-top-item">
                <div class="rank-top-content content-2">
                  <div class="head-content">
                    <!----><img
                      class="head-content-guan"
                      src="/static/img/main/guan_1.webp"
                      draggable="false"
                    />

                    <!----><img
                      class="head-content-img"
                      src="/static/img/main/32.webp"
                      draggable="false"
                    />
                  </div>
                  <div class="user-name u-line-1">luckyman</div>
                  <div class="rank-price">$65,000.00</div>
                  <div class="bu-img-content">
                    <!----><img
                      class="bu-img"
                      src="/static/img/main/bu_1.webp"
                      draggable="false"
                    />
                    <div class="bu-img-text">NO.1</div>
                  </div>
                </div>
              </div>
              <div class="rank-top-item">
                <div class="rank-top-content content-3">
                  <div class="head-content">
                    <!----><img
                      class="head-content-guan"
                      src="/static/img/main/guan_3.webp"
                      draggable="false"
                    />

                    <!----><img
                      class="head-content-img"
                      src="/static/img/main/32.webp"
                      draggable="false"
                    />
                  </div>
                  <div class="user-name u-line-1">luckyman</div>
                  <div class="rank-price">$65,000.00</div>
                  <div class="bu-img-content">
                    <!----><img
                      class="bu-img"
                      src="/static/img/main/bu_3.webp"
                      draggable="false"
                    />
                    <div class="bu-img-text">NO.3</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="table">
              <div class="table-content">
                <div class="table-row table-head">
                  <div class="num-item">No.</div>
                  <div class="name-item">User</div>
                  <div class="price-item">Money</div>
                </div>
                <div class="table-row" v-for="(item, index) in 10" :key="index">
                  <div class="num-item">4</div>
                  <div class="name-item">
                    <img
                      class="name-item-avatar"
                      src="/static/img/main/32.webp"
                      draggable="false"
                    />
                    <div class="name-item-text u-line-1">codere</div>
                  </div>
                  <div class="price-item">$1,010.95</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "tab_rank",
  computed: {
    ...mapState(["bc_svg"]),
  },
  mounted() {},
  data() {
    return {
      active: 0,
      luckyData: [],
    };
  },
  methods: {
    initData() {
     
      this._showLoading();
      this.$http
        .get(`api/v1/ranking`)
        .then(async (res) => {
          this._dismissLoading();
          if (res.data && res.data.isSuccess) {
            this.luckyData = res.data.resultData;
          } else {
            this._showToast(res.data.message);
          }
        })
        .catch((err) => {
          this._dismissLoading();
          this._showToast(err.message);
        });
    },
    gotoDetail(item) {
      this.$router.push({
        name: "rankTips",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes scale_text-data-v-0924c8e5 {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes but_line-data-v-3dcd0044 {
  0% {
    webkit-transform: translateX(-52px) rotate(45deg);
    transform: translateX(-52px) rotate(45deg);
  }
  100% {
    webkit-transform: translateX(634px) rotate(45deg);
    transform: translateX(634px) rotate(45deg);
  }
}
.rank {
  min-height: 100%;
  overflow-x: hidden;
  font-family: Avenir, Helvetica, Arial, sans-serif;

  background-size: 110% auto;
  .top {
    // background-image: url(/static/img/main/top_bc.png);
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 794px;
    .content {
      width: 100%;
      height: 100%;
      .page-top-bc {
        background: linear-gradient(
          180deg,
          rgba(246, 160, 86, 0.8),
          hsla(0, 0%, 100%, 0)
        );
      }
      .page-top-bc {
        position: absolute;
        width: 100%;
        height: 100%;
        // margin-top: -44px;
        height: 361px;
        // height: 794px;
        .page-top-img-bc {
          position: absolute;
          top: 66px;
          left: 50%;
          transform: translateX(-50%);
          width: 249px;
          height: 265px;
          .cont {
            position: relative;
            // background: green;
            overflow: hidden;
            height: 100%;
            border-radius: 50%;
            .light {
              position: absolute;
              width: 52px;
              height: 520px;
              left: 0;
              top: -104px;
              z-index: 5;
              background: linear-gradient(
                90deg,
                hsla(0, 0%, 100%, 0),
                hsla(0, 0%, 100%, 0.3),
                hsla(0, 0%, 100%, 0)
              );
              -webkit-animation: but_line-data-v-3dcd0044 2.5s linear infinite;
              animation: but_line-data-v-3dcd0044 2.5s linear infinite;
            }
            // .cont:hover .light {
            //   animation: cross-data-v-64689435 1.5s;
            // }
          }

          // height: 249px;
        }
        .page-top-img-bu {
          position: absolute;
          top: 234px;
          left: 50%;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 278px;
        }
        .page-top-img-banner {
          position: absolute;
          top: 317px;
          left: 50%;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);

          width: 390px;
          height: 78px;
        }
      }
      .rank-top {
        /* padding-top: 342px; */
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding-top: 5px;
        position: absolute;
        width: 100%;
        top: 392px;

        .rank-top-item {
          position: relative;

          .rank-top-content {
            width: 82px;
            height: 114px;
            border-radius: 5px;
            position: relative;
          }
          .head-content-img {
            width: 55px;
            height: 55px;
            border-radius: 100%;
            border: 1px solid currentColor;
            position: absolute;
            left: 50%;
            top: 0px;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            z-index: 2;
          }
          .head-content-guan {
            position: absolute;
            width: 33px;
            height: 26px;
            left: 50%;
            top: -30px;
            -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
          }
          width: 114px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-top: 31px;
          padding-bottom: 31px;
          .user-name {
            margin-top: 31px;
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: #fff;
            margin-bottom: 4px;
          }
          .rank-price {
            font-size: 12px;
            color: #f44;
            text-align: center;
            width: 100%;
            font-weight: 700;
            margin-bottom: 20px;
          }
          .bu-img-content {
            width: 114px;
            height: 45px;
            position: absolute;
            left: 50%;
            bottom: 13px;
            -webkit-transform: translate(-50%, 50%);
            transform: translate(-50%, 50%);
            z-index: 2;
            .bu-img {
              width: 100%;
              height: 100%;
            }
            .bu-img-text {
              width: 109px;
              text-align: center;
              font-size: 16px;
              color: #fff;
              font-weight: 700;
              position: absolute;
              left: 50%;
              top: 36%;
              -webkit-animation: scale_text-data-v-0924c8e5 1s ease-in-out
                infinite alternate;
              animation: scale_text-data-v-0924c8e5 1s ease-in-out infinite
                alternate;
            }
          }
        }
        .content-1 {
          color: #78dffd;
          background: linear-gradient(180deg, #b7e9ff, #3086ac);
          margin-top: 41px;
        }
        .content-2 {
          color: #f0be48;
          background: linear-gradient(180deg, #fee06e, #ecbb51);
        }
        .content-3 {
          color: #e3997a;
          background: linear-gradient(180deg, #f2c6b2, #dd9976);
          margin-top: 41px;
        }
      }

      .table {
        width: 100%;
        top: 608px;
        position: absolute;
        .table-content {
          width: 365px;
          margin: 15px auto;
          .table-row:nth-child(2n-1) {
            background-color: #3a1c03;
          }
          .table-head {
            font-weight: 700;
            background-color: #543509 !important;
          }
          .table-row {
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 12px;
            color: #fff;
          }
          .num-item {
            flex: 1.4;
            height: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 18px;
            font-weight: 700;
          }
          .name-item {
            flex: 4;
            height: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .name-item-avatar {
              width: 27px;
              height: 27px;
              border-radius: 100%;
              margin-right: 10px;
            }
            .name-item-text {
              font-size: 14px;
              max-width: 93px;
            }
          }
          .price-item {
            flex: 4;
            height: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 16px;
            font-weight: 700;
          }
          .table-row:nth-child(2n) {
            background-color: var(--main-bc-color);
            color: var(--text-color);
          }
        }
      }

      .iconfont {
        position: absolute;
        top: 444px;
        color: rgb(192, 196, 204);
        font-size: 44px;
        font-weight: 700;
        left: 50%;
        transform: translateX(-50%);
      }
      .no-data {
        position: absolute;
        top: 501px;
        color: rgb(192, 196, 204);
        font-size: 13px;
        font-weight: 500;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
<style lang="scss">
.rank {
  .van-tabs__nav--line {
    background: transparent;
    backdrop-filter: blur(10px);
  }
  .van-tab {
    font-size: 15px;
  }
  .van-tabs {
    /* position: relative; */
    position: fixed;
    width: 100%;
    z-index: 10000000;
  }
}
</style>